$(function() {
    $.ajax({
        url: './js/chooseData.json',
        type: 'get',
        success(res) {
            let row = $('.chooseThings')
            let row2 = $('.talentrow')
            let row3 = $('.hotrow')
            let row4 = $('.recommendeds')
            row.html('')
            res.chooseList.forEach((item, index) => {
                row.append(`
                        <div class="col-md-6 col-xs-12 mb2">
                            <div class="card">
                                <div class="cardImg col-md-5"><img src="${item.img}" alt=""></div>
                                <div class="col-md-7">
                                    <div>
                                        <h3>${item.titel}</h3>
                                    </div>
                                    <div>${item.tips}</div>
                                </div>
                            </div>
                        </div>
                `)
            })
            // 人才
            res.talentList.forEach((item, index) => {
                row2.append(`
                        <div class="col-md-12 mb2">
                            <div class="card">
                                <div class="cardImg"><img src="${item.img}" alt=""></div>
                                <div class="col-md-8">
                                    <div>
                                        <h3><strong>${item.job}</strong>：${item.name}</h3>
                                    </div>
                                    <div class="talentTips fz2">${item.talentTips}</div>
                                </div>
                            </div>
                        </div>
                `)
            })
            // 热销
            res.hotList.forEach((item, index) => {
                row3.append(`
                        <div class="row card">
                            <div class="col-md-1 col-xs-4">
                                <h1><strong>0${index + 1}</strong></h1>
                            </div>
                            <div class="col-md-3 col-xs-6">
                                <img src="${item.img}" alt="">
                            </div>
                            <div class="col-md-7 col-xs-12">
                                <h3><strong>${item.name}</strong></h3>
                                <span>${item.hotTips}</span>
                            </div>
                        </div>
                        <div class="mb2"></div>
                `)
            })

            // 商品页推荐
            res.recommendedsList.forEach((item, index) => {
                row4.append(`
                        <div class="col-md-4">
                            <div class=" card">
                                <img src="${item.img}" alt="">
                            </div>
                        </div>
                `)
            })

            let drinks = $('.drinks')
            let rice = $('.rice')
            let noodles = $('.noodles')
            let dessert = $('.dessert')
            // 商品渲染
            res.productsList.forEach((item, index) => {
                if (item.class == 'drinks') {
                    drinks.append(`
                        <div class="col-md-2 col-xs-3">
                            <div class="product">
                                <img src="${item.img}" alt="">
                            </div>
                        </div>
                `)
                }else if (item.class == 'rice') {
                    rice.append(`
                        <div class="col-md-2 col-xs-3">
                            <div class="product">
                                <img src="${item.img}" alt="">
                            </div>
                        </div>
                `)
                }else if (item.class == 'dessert') {
                    dessert.append(`
                        <div class="col-md-2 col-xs-3">
                            <div class="product">
                                <img src="${item.img}" alt="">
                            </div>
                        </div>
                `)
                }else if (item.class == 'noodles') {
                    noodles.append(`
                        <div class="col-md-2 col-xs-3">
                            <div class="product">
                                <img src="${item.img}" alt="">
                            </div>
                        </div>
                `)
                }
            })
            
            
            $('.product').click(function(){
                $('.productDetails').css('display','block')
                $('.right').css('display','none')
            })
            
            $('.product').parent().on({
                mouseenter() {
                    $(this).css('transition','all .2s')
                    $(this).css('transform','scale(1.1)')
                },
                mouseleave() {
                    $(this).css('transform','scale(1)')
                }
            })


        }
    })
    
    


    // 导航条随页面滚动
    let nav = $('.navbar')
    // console.log(nav.offset)
    $(window).scroll(function() {
        if ($(window).scrollTop() > 30) {
            nav.css({
                'position': 'fixed',
                'top': 0,
                'z-index': '999',
                'float': 'left',
                'width': '100%',
                'background-color': '#f8f8f8'
            })
        }
        if ($(window).scrollTop() == 0) {
            nav.css({
                'position': 'static',
                'background-color': '#fff',
            })
        }
    })
    
    
})
